<template>
<div>
<!-- 城市头部组件 -->
  <city-header></city-header>
<!-- 城市搜索组件 -->
  <city-search :lists="cities"></city-search>
<!-- 当前城市选择列表组件 -->
  <city-adress :list="cities" :hotlist="hotCities" :letter="letter"></city-adress>
<!-- 字母组件 -->
<city-letter :lists="cities" @getaplha="handAplha"></city-letter>
</div>
</template>

<script>
import CityHeader from './components/Headercity.vue'
import CitySearch from './components/Searchcity.vue'
import CityAdress from './components/Adresscity.vue'
import CityLetter from './components/Lettercity.vue'
import axios from 'axios'

export default {
  name: 'city',
  components: {
    CityHeader,
    CitySearch,
    CityAdress,
    CityLetter
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      letter: ''
    }
  },
  mounted () {
    axios.get('/localdata/city.json')
      .then((res) => {
        let dataObj = res.data
        let datalist = dataObj.data
        if (dataObj.ret && datalist) {
          this.hotCities = datalist.hotCities
          this.cities = datalist.cities
        }
      })
  },
  methods: {
    handAplha (key) {
      this.letter = key
    }
  }
}
</script>

<style>
</style>
